<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Json和数据存储</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <button class="delSingle">删除单个数据</button>
    <button class="delAll">删除全部数据</button>
</body>
<script>
    $(function(){
        // 1.创建对象来存取
        var mySelf = {
            name:'甄嬛',
            age:'18',
            love:['果郡王','雍正','合欢花']
        }

        // 存储到本地（键，值对）
        // 转换成字符串
        var strMySelf = JSON.stringify(mySelf);
        sessionStorage.setItem('zh',strMySelf);

        // 获取数据
        var getMySelf = sessionStorage.getItem('zh');
        console.log(getMySelf);
        // 转换成json对象
        var jsonMySelf = JSON.parse(getMySelf);
        for(var k in jsonMySelf){
            $('body').append('<p>属性名：'+k+',属性值：'+jsonMySelf[k])
        }


        // localstroage
        var angelBaby = {
            chinese:'杨颖',
            husband:'黄晓明',
            from:'Hongkong',
            project:'创业时代'
        }
        // 转成字符串
        var yyStr = JSON.stringify(angelBaby);
        // 存储数据
        localStorage.setItem('yy',yyStr);

        // 获取数据
        var abStr = localStorage.getItem('yy');
        // 转成json对象
        var jab = JSON.parse(abStr);
        for (var key in jab) {
            $('body').append('属性名：'+key+',属性值：'+jab[key])
        }

        $('.delSingle').click(function(){
            // 单个删除
            localStorage.removeItem('user');
        })

        $('.delAll').click(function(){
            // 全部删除
            localStorage.clear();
        })

    })
</script>
</html>